<template>
	<el-form ref="dialogForm" :disabled="mode=='show'" :model="form" :rules="rules" label-position="top"
			 label-width="80px">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="平台用户" prop="user_id">
					<el-select
						v-model="form.user_id"
						:disabled="mode=='edit'"
						:loading="loading"
						:remote-method="remoteMethod"
						filterable
						placeholder="请输入用户名称"
						remote
						reserve-keyword style="width:100%">
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>

			</el-col>

			<el-col :span="12">
				<el-form-item label="使用人群" prop="time_type">
					<el-radio-group v-model="form.type">
						<el-radio v-model="form.type" label='1'>商家</el-radio>
						<el-radio v-model="form.type" label='2'>个人</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row v-if="form.type==1" :gutter="20">
			<el-col :span="12">
				<el-form-item label="商家名称" prop="store_name">
					<el-input v-model="form.store_name" clearable placeholder="请输入商家名称"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="商家电话" prop="store_tel">
					<el-input v-model.number="form.store_tel" clearable placeholder="请输入商家电话"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="商家所在地区" prop="store_city">
					<el-cascader v-model="form.store_city_code" :options="Aoptions" placeholder="请选择所属地区"
								 style="width:100%" @change="handleChange">
					</el-cascader>
					<!--					<el-input placeholder="请输入所在地区" v-model="form.store_city" clearable></el-input>-->
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="商家详细地址" prop="store_address">
					<el-input v-model="form.store_address" clearable placeholder="请输入详细地址"></el-input>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item label="商家logo图片" prop="store_logo">
					<sc-upload v-model="form.store_logo" :apiObj="uploadApi" :on-success="success" :width="120">
						<div class="custom-empty">
							<i class="el-icon-upload"></i>
							<p>上传图片</p>
						</div>
					</sc-upload>
				</el-form-item>
			</el-col>
			<!--			<el-col :span="12">-->
			<!--				<el-form-item label="是否关闭" prop="time_type">-->
			<!--					<el-radio-group v-model="form.is_close">-->
			<!--						<el-radio v-model="form.is_close" label='0'>否</el-radio>-->
			<!--						<el-radio v-model="form.is_close" label='1'>是</el-radio>-->
			<!--					</el-radio-group>-->
			<!--				</el-form-item>-->
			<!--			</el-col>-->

			<el-col :span="12">
				<el-form-item label="商家介绍" prop="store_introduce">
					<el-input v-model="form.store_introduce" placeholder="请输入商家介绍" type="textarea"></el-input>
				</el-form-item>
			</el-col>

		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="绑定抖音用户" prop="bind_dyuser_id">
					<el-select
						v-model="form.bind_dyuser_id"
						:disabled="mode=='edit'"
						:loading="loading"
						:remote-method="remoteMethod"
						filterable
						placeholder="请输入抖音用户名称"
						remote
						reserve-keyword
						style="width:100%">
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="抖音UID/UserId" prop="dy_uid">
					<el-input v-model="form.dy_uid" clearable placeholder="请前往抖音复制UID/UserId（纯数字）"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="快手用户ID" prop="ks_uid">
					<el-input v-model="form.ks_uid" clearable placeholder="请输入快手用户ID"></el-input>
				</el-form-item>
			</el-col>
			<!--			<el-col :span="12">-->
			<!--				<el-form-item label="官方" prop="isofficial">-->
			<!--					<el-radio-group v-model="form.isofficial">-->
			<!--						<el-radio v-model="form.isofficial" label='0'>否</el-radio>-->
			<!--						<el-radio v-model="form.isofficial" label='1'>是</el-radio>-->
			<!--					</el-radio-group>-->
			<!--				</el-form-item>-->
			<!--			</el-col>-->

		</el-row>
	</el-form>
</template>

<script>
import {CodeToText, regionData} from 'element-china-area-data'

export default {
	props: {
		mode: {type: String, default: "add"}
	},
	data() {
		return {
			Aoptions: regionData,
			form: {
				id: "",
				type: "1",
				user_id: "",
				bind_dyuser_id: "",
				store_name: "",
				store_tel: '',
				store_introduce: '',
				store_address: '',
				store_city: '',
				store_city_code: [],
				store_logo: '',
				is_close: '0',
				dy_uid: '',
				ks_uid: '',
				isofficial: '0'
			},
			loading: false,
			rules: {
				user_id: [
					{required: true, message: '请选择用户'}
				],
				store_name: [
					{required: true, message: '请输入商家名称'}
				],
				store_tel: [
					{required: true, message: '请输入商家电话'}
				],
				store_address: [
					{required: true, message: '请输入商家详细地址'}
				],
				store_introduce: [
					{required: true, message: '请输入商家介绍'}
				],
				store_city: [
					{required: true, message: '请输入商家所在地区'}
				],
				store_logo: [
					{required: true, message: '请输入商家logo图片'}
				],

			},
			uploadApi: this.$API.upload.img,
			options: []
		}
	},
	mounted() {

	},
	methods: {
		handleChange(value) {

			let data = CodeToText[value[0]] + "-" + CodeToText[value[1]] + "-" + CodeToText[value[2]];
			this.form.store_city = data

		},
		success(res) {
			this.form.store_logo = res.data
			return false
		},
		//表单提交方法
		submit(callback) {
			this.$refs.dialogForm.validate((valid) => {
				if (valid) {
					callback(this.form)
					console.log(this.form)
				} else {
					return false;
				}
			})
		},
		setData(data) {
			Object.assign(this.form, data)
			this.form.is_close = data.is_close == 1 ? '1' : '0'
			this.form.type = data.type == 1 ? '1' : '2'
			this.form.isofficial = data.isofficial == 1 ? '1' : '0'
		},
		remoteMethod(query) {
			if (query !== '') {
				this.loading = true;
				setTimeout(() => {
					this.$API.store.user_seach.get({k: query}).then(res => {
						if (res.code == 200) {
							this.loading = false;
							this.options = res.data

						} else {
							this.$alert(res.msg, "提示", {type: 'error'})
						}
					})
				}, 200);
			} else {
				this.options = [];
			}
		}
	}
}
</script>

<style scoped>
.custom-empty {
	width: 100%;
	height: 100%;
	line-height: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.custom-empty i {
	font-size: 40px;
	color: #8c939d;
}

.custom-empty p {
	font-size: 12px;
	font-weight: normal;
	color: #8c939d;
	margin-top: 10px;
}
</style>
